<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar 
      title="计量" 
      :border="false"
      :fixed="true"
      :status-bar="true"
      background-color="#4980FF"
      color="#FFFFFF"
      left-icon="back"
      @clickLeft="goBack">
    </uni-nav-bar>
    
    <!-- 筛选条件区域 -->
    <view class="filter-area">
      <view class="filter-item" @click="toggleFilter('project')">
        <text class="filter-text">{{ selectedFilters.project }}</text>
        <uni-icons :type="activeFilter === 'project' ? 'up' : 'down'" size="16" color="#333333"></uni-icons>
      </view>
      
      <view class="filter-item" @click="toggleFilter('supplier')">
        <text class="filter-text">{{ selectedFilters.supplier }}</text>
        <uni-icons :type="activeFilter === 'supplier' ? 'up' : 'down'" size="16" color="#333333"></uni-icons>
      </view>
      
      <view class="filter-item" @click="toggleFilter('status')">
        <text class="filter-text">{{ selectedFilters.status }}</text>
        <uni-icons :type="activeFilter === 'status' ? 'up' : 'down'" size="16" color="#333333"></uni-icons>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="top" :mask-click="true" @change="onPopupChange">
      <view class="filter-dropdown">
        <view v-if="activeFilter === 'project'" class="dropdown-content">
          <view class="dropdown-item" v-for="item in projectOptions" :key="item" @click="selectFilter('project', item)">
            <text :class="{ selected: selectedFilters.project === item }">{{ item }}</text>
            <uni-icons v-if="selectedFilters.project === item" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
        </view>
        
        <view v-if="activeFilter === 'supplier'" class="dropdown-content">
          <view class="dropdown-item" v-for="item in supplierOptions" :key="item" @click="selectFilter('supplier', item)">
            <text :class="{ selected: selectedFilters.supplier === item }">{{ item }}</text>
            <uni-icons v-if="selectedFilters.supplier === item" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
        </view>
        
        <view v-if="activeFilter === 'status'" class="dropdown-content">
          <view class="dropdown-item" v-for="item in statusOptions" :key="item" @click="selectFilter('status', item)">
            <text :class="{ selected: selectedFilters.status === item }">{{ item }}</text>
            <uni-icons v-if="selectedFilters.status === item" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 计量选择区域 -->
    <view class="metering-section" @click="openTreePicker">
      <text class="metering-text">计量</text>
      <text class="metering-path">{{ selectedNodePath }}</text>
      <uni-icons type="right" size="16" color="#999999"></uni-icons>
    </view>

    <!-- 表格区域 -->
    <scroll-view class="material-list" scroll-y>
      <view class="table-container">
        <uni-table 
          :data="tableData" 
          :loading="false"
          border="true"
          stripe="true"
          emptyText="暂无数据">
          <uni-tr>
            <uni-th align="center">姓名</uni-th>
            <uni-th align="center">年龄</uni-th>
            <uni-th align="center">项目</uni-th>
            <uni-th align="center">性别</uni-th>
            <uni-th align="center">身高</uni-th>
            <uni-th align="center">体重</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td align="center">{{ item.name }}</uni-td>
            <uni-td align="center">{{ item.age }}</uni-td>
            <uni-td align="center">{{ item.project }}</uni-td>
            <uni-td align="center">{{ item.gender }}</uni-td>
            <uni-td align="center">{{ item.height }}</uni-td>
            <uni-td align="center">{{ item.weight }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </scroll-view>

    <!-- 多级选择器弹窗 -->
    <uni-popup ref="treePopup" type="bottom" :mask-click="true" @change="onTreePopupChange">
      <view class="tree-popup-content">
        <view class="selected-path">
          <text>当前选择: {{ selectedNodePath }}</text>
        </view>
        <scroll-view scroll-y class="tree-scroll-view">
          <view v-for="node1 in treeData" :key="node1.id">
            <view class="tree-node level-1" @click="toggleNode(node1, treeData)">
              <uni-icons :type="node1.open ? 'down' : 'right'" size="16" color="#999999"></uni-icons>
              <text class="node-text">{{ node1.name }}</text>
            </view>
            <view v-if="node1.open" class="node-children">
              <view v-for="node2 in node1.children" :key="node2.id">
                <view class="tree-node level-2" @click="toggleNode(node2, node1.children)">
                  <uni-icons :type="node2.open ? 'down' : 'right'" size="16" color="#999999"></uni-icons>
                  <text class="node-text">{{ node2.name }}</text>
                </view>
                <view v-if="node2.open" class="node-children">
                  <view v-for="node3 in node2.children" :key="node3.id">
                    <view class="tree-node level-3" :class="{ selected: selectedNodeId === node3.id }" @click="selectNode(node3, [node1, node2])">
                      <uni-icons v-if="selectedNodeId === node3.id" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
                      <text class="node-text">{{ node3.name }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    
    <!-- 浮动添加按钮 -->
    <uni-fab 
      :pattern="fabPattern"
      :content="fabContent"
      :horizontal="horizontal"
      :vertical="vertical"
      :direction="direction"
      @fabClick="fabClick">
    </uni-fab>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Filter state
      activeFilter: null,
      selectedFilters: {
        project: '项目一',
        supplier: '供应商A',
        status: '全部',
      },
      projectOptions: ['项目一', '项目二', '项目三'],
      supplierOptions: ['供应商A', '供应商B', '供应商C'],
      statusOptions: ['全部', '已入库', '未入库'],

      // Tree picker state
      treeData: [
        {
          id: '1',
          name: '一项目',
          open: false,
          children: [
            {
              id: '1-1',
              name: '一项目之一',
              open: false,
              children: [
                { id: '1-1-1', name: '三级项目' }
              ],
            },
          ],
        },
        {
          id: '2',
          name: '二项目',
          open: true,
          children: [
            {
              id: '2-1',
              name: '二项目之一',
              open: false,
              children: [
                { id: '2-1-1', name: '三级项目' }
              ],
            },
            {
              id: '2-2',
              name: '二项目之二',
              open: true,
              children: [
                { id: '2-2-1', name: '三级项目-1' },
                { id: '2-2-2', name: '三级项目-2' },
                { id: '2-2-3', name: '三级项目-3' },
              ],
            },
          ],
        },
      ],
      selectedNodeId: '2-2-3',
      selectedNodePath: '二项目 / 二项目之二 / 三级项目-3',

      // Table data
      tableData: [
        { name: '张三', age: 25, project: '项目A', gender: '男', height: '175cm', weight: '70kg' },
        { name: '李四', age: 30, project: '项目B', gender: '女', height: '165cm', weight: '55kg' },
        { name: '王五', age: 28, project: '项目A', gender: '男', height: '180cm', weight: '75kg' },
        { name: '赵六', age: 32, project: '项目C', gender: '女', height: '170cm', weight: '60kg' },
      ],
      formData: {
        listId: '',
        listName: '',
        meterId: '',
        quantity: '',
        subItem: '',
        part: '',
        drawingNo: '',
        certificate: '',
        calculation: '',
        comments: '',
      },
      fabPattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF'
      },
      fabContent: [
        {
          iconPath: '/static/cl_add.png',
          selectedIconPath: '/static/cl_add.png',
          text: '添加计量',
          active: false
        }
      ],
      horizontal: 'right',
      vertical: 'bottom',
      direction: 'horizontal'
    };
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    // Filter methods
    toggleFilter(filter) {
      if (this.activeFilter === filter) {
        this.activeFilter = null;
        this.$refs.filterPopup.close()
      } else {
        this.activeFilter = filter;
        this.$refs.filterPopup.open()
      }
    },
    
    selectFilter(type, value) {
      this.selectedFilters[type] = value;
      this.activeFilter = null;
      this.$refs.filterPopup.close()
    },
    
    onPopupChange(e) {
      if (!e.show) {
        this.activeFilter = null
      }
    },

    // Tree picker methods
    openTreePicker() {
      this.$refs.treePopup.open()
    },
    
    onTreePopupChange(e) {
      // 弹窗关闭时的处理
    },

    toggleNode(node, siblings) {
      if (node.children && node.children.length > 0) {
        // 手风琴效果：关闭同级节点
        siblings.forEach(sibling => {
          if (sibling.id !== node.id) {
            sibling.open = false;
          }
        });
        
        // 切换当前节点
        node.open = !node.open;
      }
    },
    
    selectNode(node, pathNodes) {
      this.selectedNodeId = node.id;
      this.selectedNodePath = `${pathNodes[0].name} / ${pathNodes[1].name} / ${node.name}`;
      this.$refs.treePopup.close()
    },
    
    fabClick(e) {
      uni.navigateTo({
        url: '/pages/metering/add'
      });
    },
    
    uploadImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          console.log('Image chosen:', res.tempFilePaths[0]);
          // Handle image upload logic here
        },
      });
    },
    
    submit() {
      console.log('Form data:', this.formData);
      // Handle form submission logic here
      uni.showToast({
        title: '提交成功',
        icon: 'success',
      });
    },
  },
};
</script>

<style lang="less">
.container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e6eaf3;
  padding-top: 88px;
}

.filter-area {
  height: 53px;
  flex-direction: row;
  background-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-color: #eeeeee;
  display: flex;
}

.filter-item {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.filter-text {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  margin-right: 5px;
}

.material-list {
  flex: 1;
  min-height: 0;
}

.material-list::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

.table-container {
  padding: 10px;
}

/* 计量区域样式 */
.metering-section {
  flex-direction: row;
  align-items: center;
  background-color: #ffffff;
  padding: 12px 15px;
  margin: 10px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
}

.metering-text {
  font-size: 16px;
  color: #333;
}

.metering-path {
  flex: 1;
  text-align: right;
  font-size: 14px;
  color: #999;
  margin-right: 8px;
}

/* 筛选弹窗样式 */
.filter-dropdown {
  width: 100%;
  background-color: #FFFFFF;
  z-index: 11;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-content {
  padding: 10px 0;
}

.dropdown-item {
  height: 44px;
  padding: 0 15px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.dropdown-item text {
  font-size: 14px;
  color: #333333;
}

.dropdown-item text.selected {
  color: #4980FF;
}

.dropdown-item:active {
  background-color: #F5F5F5;
}

/* 多级选择器弹窗样式 */
.tree-popup-content {
  background-color: #ffffff;
  max-height: 60vh;
  flex-direction: column;
}

.selected-path {
  padding: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #666;
  font-size: 14px;
}

.tree-scroll-view {
  height: 50vh;
}

.tree-node {
  flex-direction: row;
  align-items: center;
  padding: 10px 15px;
  font-size: 15px;
  display: flex;
}

.level-2 {
  padding-left: 30px;
}

.level-3 {
  padding-left: 45px;
}

.node-text {
  color: #333;
  margin-left: 8px;
}

.tree-node.selected {
  background-color: #F5F7FA;
}

.tree-node.selected .node-text {
  color: #4980FF;
}
</style>